<template>
    <div class="cus_input">
        <el-select v-model="value.type" placeholder="类型" style="width: 200px" @change="handleChange">
            <el-option
                    v-for="item in linkTypeAry"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
            </el-option>
        </el-select>
        <el-input v-model="value.target" placeholder="请输入路径" @input="handleInput" :readonly="value.type === 'mini'" @focus="value.type === 'mini' && fnOpenPopup()"></el-input>

        <el-dialog title="跳转链接设置" :visible="dialogDataVisible" :show-close="false" custom-class="dialogData">
            <el-tabs v-model="activeTab" @tab-click="handleTabSwitch">
                <el-tab-pane v-if="type === 'store' || type === 'all'" label="门店管理" name="first"></el-tab-pane>
                <el-tab-pane v-if="type === 'product' || type === 'all'" label="商品管理" name="second"></el-tab-pane>
                <el-tab-pane v-if="type === 'dish' || type === 'all'" label="菜品管理" name="third"></el-tab-pane>
                <el-tab-pane v-if="type === 'activity' || type === 'all'" label="活动管理" name="fourth"></el-tab-pane>
                <el-tab-pane v-if="type === 'voucher' || type === 'all'" label="兑换券管理" name="fifth"></el-tab-pane>
            </el-tabs>
            <el-table :data="tableData"
                      width="100%"
                      ref="ref_table"
                      highlight-current-row
                      @current-change="handleRadioTable">
                      <el-table-column prop="name" label="名称"/>
                      <el-table-column prop="brief" label="简介">
                          <template slot-scope="{row: {brief}}">
                              <span>{{brief | subStr(10)}}</span>
                          </template>
                      </el-table-column>
            </el-table>
            <el-pagination
                    class="muse_pagination"
                    :background="true"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="paging.page"
                    :page-sizes="paging.pageSizeAry"
                    :page-size="paging.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="paging.total">
            </el-pagination>
            <span slot="footer" class="dialog-footer">
                <el-button @click="fnClosePopup">取 消</el-button>
                <el-button type="primary" @click="fnSaveChoosed">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
  import tableMixin from '@/views/musePage/mixins/tableMixin'
  import { getStoreList, getproductlist, getDishList, getActivitylist, getVoucherList } from '@/api/admin'
  export default {
    name: 'muse-link',
    mixins: [tableMixin],
    props: {
      value: {
        type: [String, Object],
        default: () => {
          return {type: 'mini', target: ''}
        }
      },
      type: {
        type: String,
        default: 'all'
      }
    },
    data() {
      return {
        linkTypeAry: [
          { label: '小程序', value: 'mini'}
          // { label: '外链', value: 'web'}
        ],
        activeTab: 'first',
        dialogDataVisible: false,
        choosedDataObj: {}
      }
    },
    methods: {
      handleInput (value) {
        this.value.target = value
        this.$emit('input', this.value)
      },
      handleChange (value) {
        this.value.type = value
        this.$emit('input', this.value)
      },
      handleTabSwitch (value) {
        this.activeTab = value && value.name ||  this.activeTab
        this.paging = {
          page: 1,
            total: 0,
            pageSize: 10,
            pageSizeAry: [10, 50, 100],
        }
        if( this.type === 'store') {
           this.activeTab === 'first'
        } else if( this.type === 'store' ) {
            this.activeTab === 'second'
        } else if( this.type === 'dish') {
          this.activeTab === 'third'
        } else if( this.type === 'activity'){
          this.activeTab === 'fourth'
        } else if( this.type === 'voucher'){
          this.activeTab === 'fifth'
        }
        this.getTableData()
      },
      // 打开门店弹框
      fnOpenPopup () {
        this.dialogDataVisible = true
        this.handleTabSwitch()
      },
      fnClosePopup () {
        this.dialogDataVisible = false
        this.choosedDataObj = {}
      },
      fnSaveChoosed () {
        let tempPath = ''
        if(this.activeTab === 'first') {
          tempPath = `/pages/storeDetail/storeDetail?id=${this.choosedDataObj._id}`
        } else if(this.activeTab === 'second') {
          tempPath = `/pages/goodsDetail/goodsDetail?id=${this.choosedDataObj._id}`
        } else if(this.activeTab === 'third') {
          tempPath = `/pages/recommendDetail/recommendDetail?id=${this.choosedDataObj._id}`
        } else if(this.activeTab === 'fourth') {
          tempPath = `/pages/activiteDetail/activiteDetail?id=${this.choosedDataObj._id}`
        } else {
          tempPath = `/pages/voucherDetail/voucherDetail?id=${this.choosedDataObj._id}`
        }
        this.handleInput(tempPath)
        this.fnClosePopup()
      },
      handleRadioTable (data) {
        this.choosedDataObj = data
      },
      // 获得门店列表
      async getTableData(value, type) {
        let params = {
          page: type === 'page'? (value ? value : this.paging.page) : this.paging.page,
          pageSize: type === 'pageSize'? (value ? value : this.paging.pageSize) : this.paging.pageSize
        }

        const { code, data: { total, currentPage, data, pageSize } } =  this.activeTab === 'first' ? await getStoreList(params) : this.activeTab === 'second' ? await getproductlist(params) : this.activeTab === 'third' ? await getDishList(params) : this.activeTab === 'fourth' ?  await getActivitylist(params) : await getVoucherList(params)
        this.paging.total = total
        this.paging.pageSize = pageSize
        this.paging.page = currentPage
        this.tableData = []
        data.forEach(item => {
          const obj = {
            name: '',
            brief: '',
            _id: item._id
          }
          if(this.activeTab === 'first') {
            obj.name = item.name
            obj.brief = item.brief
          } else if(this.activeTab === 'second') {
            obj.name = item.name
          } else if(this.activeTab === 'third') {
            obj.name = item.title
            obj.brief = item.subtitle
          } else if(this.activeTab === 'fourth') {
            obj.name = item.title
            obj.brief = item.subtitle
          } else {
            obj.name = item.title
            obj.brief = item.description
          }
           this.tableData.push(obj)
        });
      
      },
    }
  }
</script>

<style>
    .dialogData .el-dialog__body {
        padding-top: 0 !important;
    }
</style>

<style lang="scss" scoped>
    .cus_input {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
</style>
